﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/v2/console/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<title>文章列表</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="${path}/party/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="${path}/party/css/pagination.css">
  <link rel="stylesheet" type="text/css" href="${path}/party/css/main.css">
</head>
<body>
<div id="VueId" v-cloak>
  <!-- 导航部分 -->
  <div class="dj-head">
    <!-- 登录/搜索 -->
    <iframe src="http://djzx.sktcm.cn/dangjian/modules/nav_login.html" width="100%" height="45" scrolling="no" ></iframe>
    <!-- logo/一级导航 -->
    <div class="dj-nav1">
      <div class="nav-center">
        <a href="javascript:;" class="logo"> <img src="${path}/party/images/logo.png" /> </a>
        <ul class="nav1-ul">
          <template v-for="(item,index) in navData">
            <li @click="tabOne(item)">{{item.name}}</li>
          </template>
           <li @click="dkzx()">课程在线</li>
        </ul>
      </div>
    </div>
    <!-- 二级导航 -->
    <div class="dj-nav2">
      <ul class="nav2-ul" >
        <template v-for="(items,index) in twoNav">
            <li :class="{active:items.id == twoNavActive}" @click="tabTwo(index,items)"> {{items.name}} </li>
        </template>
      </ul>
    </div>
    <div class="dj-nav3">
      <div class="nav3-div">
        <template v-for="(item,index) in threeNav">
          <a href="javascript:;" :class="{active:item.id == threeNavActive}" @click="tabThree(index,item)">{{ item.name }}</a>
        </template>
      </div>
    </div>
  </div>

   <!-- 内容部分 -->
  <div class="dj-body">
    <div class="center-div">
     <div class="location-div" v-show="isShow"><!-- 当前位置 -->
        <img src="${path}/party/images/articlesList/icon_position.png" />
        您正在所在的位置：
        <p> 
          <a href="javascript:;">{{oneName}}</a> >
          <a href="javascript:;">{{twoName}}</a> >
          <a href="javascript:;">{{threeName}}</a>
        </p>
      </div>
      <div class="detail-div">
        <div class="det-left">
          <h4 class="det-left-title">{{article.title}}</h4>
          <!-- <label class="det-left-time">2018-09-12 11:09:20 来源：北开</label> -->
          <p class="det-left-title-p">{{article.subtitle}}</p>
          <div class="det-left-textar" >
            <p v-html="article.content">{{article.content}}</p>
          </div>
        </div>
        <div class="det-right">
          <div class="det-right-top">
            <img src="${path}/party/images/img1.png" class="image1" />
            <div class="fragment-div">
              <i class="quotationMark1-icon"></i>
              <p>
                	中共中央总书记习近平在主持学习时强调，法律是准绳，中共中央总书记习近平在主持学习时强调，法律是准绳，中共中央总书记习近平在主持学习时强调，法律是准绳，中共中央总书记习近平在主持学习时强调，法律是准绳，
                <br>
                <span>———习近平</span>
              </p>
              <i class="quotationMark2-icon"></i>
            </div>
          </div>
          <div class="det-right-bottom">
            <h4 class="news-title">消息</h4>
            <div class="contactUs-div">
              <label>联系我们的投稿</label>
              <p>如有查询，请致电010-12345678</p>
              <a href="javascript:;" class="btn btn-sm">给我们发电子邮件</a>
            </div>
            <div class="activity-div">
              <h4>即将举行的活动</h4>
              <label>无事件</label>
              <a href="javascript:;" class="btn btn-sm">查看全部</a>
            </div>
          </div>
        </div>
      </div>



      <div class="moreInfo-div">
        <h4>了解更多信息</h4>
        <ul>
          <li>
            <img src="${path}/party/images/articlesList/icon_massage.png" />
            <div class="ri-div">
              <p>现在给我们发电子邮件，<br>告诉我们你的疑问</p>
              <a href="javascript:;">发电子邮件询问</a>
            </div>
          </li>
          <li>
            <img src="${path}/party/images/articlesList/icon_phone.png" />
            <div class="ri-div">
              <p>和我们的顾问谈谈你的<br>选择</p>
              <a href="javascript:;" class="red">要求回电话</a>
            </div>
          </li>
          <li>
            <img src="${path}/party/images/articlesList/icon_course.png" />
            <div class="ri-div">
              <p>了解更改关于我们和我<br>们的课程</p>
              <a href="javascript:;">查看课程</a>
            </div>
          </li>
        </ul>
      </div>

    </div>
  </div>
  
  
  <!-- 页底部分 -->
  <jsp:include page="footer.jsp"></jsp:include>
</div>
<!-- javascritp flie -->
<script type="text/javascript" src="${path}/party/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="${path}/party/js/jquery.pagination.js"></script>
<script type="text/javascript" src="${path}/party/js/rem(750).js"></script>
<script type="text/javascript" src="${path}/party/js/vue2.js"></script>
<script type="text/javascript" src="${path}/party/plugin/nav-moveline/js/jquery.easing.js"></script>
<script type="text/javascript" src="${path}/party/plugin/nav-moveline/js/moveline.js"></script>
<script type="text/javascript" src="${path}/party/plugin/nav-moveline/js/toast.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el: '#VueId',
        data: {
        	 height:600,
        	 twoNav:[],
             twoNavActive: 0,
             threeNav:[],
             threeNavActive: 0,
             navData:[],
             oneName:'',
             twoName:'',
             threeName:'',
             path:'',
             isShow:true,
         	articleId:"",
         	article:{}
        },
        created:function(){
        	this.articleId = ${articleId};
        	this.getArticleDetail(this.articleId);
        	let _that = this;
        	this.getMenu();
        	this.flag = ${flag};
        	this.$nextTick(function(){
        		$('.nav1-ul').moveline({customTop:true,top:0});//一级导航动画初始化 
            	/* this.twoNav = this.navData[0].nav;//给二级导航 添加默认的数据
            	if(this.navData[0].nav.length == 0){
            		this.threeNav = [];
            	}else{
            		this.threeNav = this.navData[0].nav[0].twoNav;//给三级导航 添加默认的数据
            	} */
            	
        		setIframeHeight("ifr");
        	});
        	
        	if(this.flag == "-1"){
        		that.tabOne(_that.navData[0]);
        	}else{
        		this.menuId = ${menuId};
            	_that.navData.forEach(function(value,index,array){
            		if(value.id == _that.menuId){
            			_that.tabOne(value);
            		}
            	});
        	}
        	
        	
        	
        	
        	
        	//this.setDefault();
        	/* this.twoNavActive = "1536214337872001";
    		this.threeNavActive = "1536214337872002"; */
        	
        	
        },
        methods: {
        	setDefault:function(){
        		this.twoNavActive = "1536214337872001";
        		this.threeNavActive = "1536214337872002";
        	},
        	getMenu(){
          	  let _that = this;
          	  //获取推荐内容
          	  $.ajax({
    				type : "post",
    				url : "${path}/web/getMenu.html",
    				dataType : "json",
    				data:{
    					menuId:_that.menuId
    				},
    				async : false,
    				success : function(data) {
    					if(data.ajax_status == "ajax_status_success"){
    						_that.navData = data.mlist;
    					}
    				},
    				error : function(XMLHttpRequest, textStatus, errorThrown){
    		          alert("出错了！");
    		       }
    			});
            },
          tabOne:function(item){
        	 /*  var iframeObject = document.getElementById('ifr');
          	  var ifrWin = iframeObject.contentWindow ;
          	
          	  var height = ifrWin.outerHeight ;
          	  console.log('height:' + height) ;
          	  this.height = height; */
          	  
          	  setIframeHeight("ifr");
          	 
        	  
        	  if(item.redirectUrl == 6){
        		  this.twoNav = [];
        		  this.threeNav = [];
        		  this.isShow = false;
        		  this.path = "${path}/web/"+item.redirectUrl+"/"+item.id+".html"
        	  }else if(item.redirectUrl == 1){
        		  /* this.twoNav = [];
        		  this.threeNav = [];
        		  this.isShow = false; 
        		  this.path = "${path}/web/"+item.redirectUrl+"/"+item.id+".html"*/
        		  window.location.href="${path}/web/index.html";
        	  }else{
        		  this.isShow = true;
        		  if(item.nav != "" && item.nav != null && item.nav != undefined){
                      this.twoNav = item.nav;//二级导航 赋值
                      //this.twoNavActive = 0;//默认 状态第一个
                      this.twoNavActive = item.nav[0].id;
                      this.threeNav = item.nav[0].twoNav;//三级导航 赋值
                      this.oneName = item.name;
                      this.twoName = item.nav[0].name;
                      this.threeName = item.nav[0].twoNav[0].name;
                      //this.threeNavActive = 0;//默认 状态第一个
                      this.threeNavActive = item.nav[0].twoNav[0].id;
                      //设置文件的跳转路径
                      this.path = "${path}/web/"+item.nav[0].twoNav[0].redirectUrl+"/"+item.nav[0].twoNav[0].id+".html"
                     
                    }else{
                      this.twoNav = [];
                      this.threeNav = []
                    }
        	  }
        	
            
          },
          tabTwo(index,data) {
            //this.twoNavActive = index;//tab切换
            setIframeHeight("ifr");
            this.twoNavActive = data.id
            this.threeNav = data.twoNav;
            this.twoName = data.name;
            
            if(data.twoNav.length == 0){
            	this.threeName = "";
            	this.path = "${path}/web/"+data.redirectUrl+"/"+data.id+".html"
            }else{
            	this.threeNavActive = data.twoNav[0].id;
            	this.threeName = data.twoNav[0].name;
            	this.path = "${path}/web/"+data.twoNav[0].redirectUrl+"/"+data.twoNav[0].id+".html"
            }
          },
          tabThree(index,data) {
        	  setIframeHeight("ifr");
        	this.path = "${path}/web/"+data.redirectUrl+"/"+data.id+".html"
        	this.threeName = data.name;
            //this.threeNavActive = index;
        	this.threeNavActive = data.id;
          },
          dkzx:function(){
        	  window.location.href="http://djzx.sktcm.cn/web/coursetype/courseType.html"
          },
          getArticleDetail:function(articleId) {
        	  let _that = this;
        	  $.ajax({
    				type : "post",
    				url : "${path}/web/artcle/"+articleId+".html",
    				dataType : "json",
    				data:{},
    				async : false,
    				success : function(data) {
    					if(data.ajax_status == "ajax_status_success"){
    						debugger;
    						_that.article = data.map;
    					}
    				},
    				error : function(XMLHttpRequest, textStatus, errorThrown){
    		          alert("出错了！");
    		       }
    			});
        	  
        	  
          }
        }
    });
    
    //设置ifram的高度
    function setIframeHeight(id){
    try{
        var iframe = document.getElementById(id);
        if(iframe.attachEvent){
            iframe.attachEvent("onload", function(){
                iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;
                console.log("*******"+iframe.height);
            });
            return;
        }else{
            iframe.onload = function(){
                iframe.height = iframe.contentDocument.body.scrollHeight;
                console.log("####"+iframe.height);
            };
            return;                 
        }     
    }catch(e){
        throw new Error('setIframeHeight Error');
    }
}
    
</script>

</body>
</html>
